<template>
  <div>
    <div>一共有{{ todoStore.counts }}条</div>
    {{ todoStore.items }}
    <el-col>
      <el-input
        v-model="todoStore.newItem"
        style="width: 240px"
        @keyup.enter="todoStore.addToDo"
        placeholder="Please input"
      />
      <el-button @click.enter="todoStore.addToDo">添加</el-button>
    </el-col>
    <ul>
      <li v-for="(item, index) in todoStore.items" :key="index">
        {{ item.text }}
        <el-button @click="todoStore.removeitem(item)"> remove</el-button>
      </li>
    </ul>
  </div>
</template>
<script setup >
import { useToDoStore } from "@/stores/todos.js";
const todoStore = useToDoStore();
const qq = (item) => {
  todoStore.removeitem(item);
};
</script>
<style lang='less' scoped></style>